<template>
  <span :class="[isInput ? 'vx-explain-tips explain-tips' : 'vx-explain-tips ']" :style="{ float: position ? 'right' : '' }">
    <ui-popover :placement="placement" width="400" trigger="hover">
      <slot> </slot>
      <i slot="reference" class="ui-icon-warning iconPositions">{{ explain }}</i>
    </ui-popover>
  </span>
</template>

<script>
export default {
  name: 'vx-explain-tips',
  props: {
    explain: {
      type: String,
      default: '说明',
      required: true,
    },
    placement: {
      type: String,
      default: 'bottom', // 出现位置
    },
    position: {
      type: Boolean,
      default: false, // 是否右浮动
    },
    isInput: {
      type: Boolean,
      default: false, // 是否在input框
    },
  },
};
</script>

<style lang="scss">
.vx-explain-tips {
  cursor: pointer;
  .iconPositions {
    color: $color-primary;
    font-size: 12px;
  }
  .ui-icon-warning {
    font-size: 12px !important;
  }
}
.explain-tips {
  position: absolute;
  top: 0;
  right: 12px;
}
</style>
